<template>
  <div class="navigation_bar_box">
    <div class="left_bar">
      <router-link to="/" custom v-slot="{ href, navigate, isActive }">
        <span :active="isActive" :href="href" @click="navigate">Lv's Home</span>
      </router-link>
    </div>
    <div class="right_bar">
      <router-link
        v-for="item in ArrRef"
        :key="item.id"
        :exact="item.exact"
        :to="{ name: item.link, params: {} }"
      >
        <Icon :icon="item.icon_font"></Icon>
        {{ item.con }}
      </router-link>
    </div>
  </div>
</template>
<script>
import { ref } from "vue";
import Icon from "../IconFont/index.vue";
let arr = [
  { id: 5, con: "关于", icon_font: "aboutMe", exact: true, link: "About" },
  { id: 4, con: "留言", icon_font: "liuYan", exact: true, link: "Message" },
  {
    id: 3,
    con: "案例",
    icon_font: "myProject",
    exact: true,
    link: "Project",
  },
  {
    id: 2,
    con: "文章",
    icon_font: "myArticle",
    link: "Article",
  },
  {
    id: 1,
    con: "首页",
    icon_font: "home",
    exact: true,
    link: "Home",
  },
];
export default {
  components: {
    Icon,
  },
  setup() {
    let ArrRef = ref(arr);
    return {
      ArrRef,
    };
  },
};
</script>
<style lang="less">
@import url("../../assets/global/var.less");
.navigation_bar_box {
  width: @navigation_bar_max_width;
  height: @navigation_bar_max_height;
  margin: 0 auto;
  display: flex;
  .icon {
    padding-left: 3px;
    padding-right: 3px;
    font-size: 20px;
  }
  .left_bar {
    font-weight: bolder;
    font-size: @navigation_bar_title_size;
    line-height: @navigation_bar_max_height;
  }
  .left_bar span {
    position: relative;
    padding-top: 5px;
    padding-bottom: 5px;
    cursor: pointer;
    &::after {
      content: "";
      position: absolute;
      width: 0%;
      height: 2px;
      background-color: @navigation_bar_title_color;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
      transition: all 0.5s;
    }
    &::before {
      content: "";
      position: absolute;
      width: 0%;
      height: 2px;
      background-color: @navigation_bar_title_color;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      transition: all 0.5s;
    }
    &:hover::after {
      width: 80%;
      transition: all 0.5s;
    }
    &:hover::before {
      width: 80%;
      transition: all 0.5s;
    }
  }
  .right_bar {
    width: 80%;
  }
  .right_bar a {
    text-decoration: none;
    padding-left: 20px;
    padding-right: 20px;
    list-style: none;
    color: @navigation_bar_content_color;
    cursor: pointer;
    float: right;
    line-height: @navigation_bar_max_height;
    font-size: @navigation_bar_content_size;
    &:hover {
      background-color: @hover_bg_color;
    }
    &.router-link-active {
      color: @navigation_bar_content_active_color;
    }
  }
}
</style>